<template>
  <div class="image-editor">
    <!-- 触发按钮 -->
    <div class="editor-trigger" @click="openEditor">
      <div v-if="!imageUrl" class="placeholder">
        <i class="fa fa-picture-o text-gray-400 mr-2"></i>
        <span>上传/编辑图片</span>
      </div>
      <div v-else class="preview">
        <img :src="imageUrl" alt="预览图片" class="preview-image">
        <span class="edit-text">点击编辑</span>
      </div>
    </div>

    <!-- 弹窗遮罩层 -->
    <div v-if="isOpen" class="editor-modal-overlay" @click="closeEditor">
      <!-- 弹窗容器 -->
      <div class="editor-modal" @click.stop>
        <!-- 弹窗头部 -->
        <div class="modal-header">
          <h3>图片编辑器</h3>
          <button class="close-button" @click="closeEditor">
            <i class="fa fa-times"></i>
          </button>
        </div>

        <!-- 弹窗内容 -->
        <div class="modal-content">
          <!-- 上传区域 -->
          <div class="upload-section mb-4">
            <div 
              class="upload-area border-2 border-dashed border-gray-300 rounded-lg p-4 text-center cursor-pointer hover:border-primary/50 hover:bg-primary/5 transition-all"
              @click="triggerFileInput"
            >
              <i class="fa fa-cloud-upload text-3xl text-gray-400 mb-2"></i>
              <p class="text-gray-500">重新上传图片</p>
              <input 
                type="file" 
                ref="fileInput"
                accept="image/*"
                class="hidden"
                @change="handleFileChange"
              >
            </div>
          </div>

          <!-- 图片预览和编辑区域 -->
          <div v-if="imageUrl" class="preview-section">
            <div class="image-preview-container relative">
              <!-- 编辑工具栏 -->
              <div class="edit-toolbar absolute top-2 right-2 bg-white/90 backdrop-blur-sm rounded-lg shadow-md p-2 flex gap-2 z-10">
                <button 
                  class="p-2 text-gray-600 hover:text-primary hover:bg-primary/10 rounded-full transition-colors"
                  @click="rotateImage"
                  title="旋转"
                >
                  <i class="fa fa-repeat"></i>
                </button>
                <button 
                  class="p-2 text-gray-600 hover:text-primary hover:bg-primary/10 rounded-full transition-colors"
                  @click="flipImage('horizontal')"
                  title="水平翻转"
                >
                  <i class="fa fa-arrows-h"></i>
                </button>
                <button 
                  class="p-2 text-gray-600 hover:text-primary hover:bg-primary/10 rounded-full transition-colors"
                  @click="flipImage('vertical')"
                  title="垂直翻转"
                >
                  <i class="fa fa-arrows-v"></i>
                </button>
                <button 
                  class="p-2 text-gray-600 hover:text-primary hover:bg-primary/10 rounded-full transition-colors"
                  @click="resetImage"
                  title="重置"
                >
                  <i class="fa fa-refresh"></i>
                </button>
              </div>

              <!-- 图片预览 -->
              <div class="image-container">
                <canvas 
                  ref="canvas"
                  :style="{
                    transform: `rotate(${rotation}deg) scaleX(${flipX}) scaleY(${flipY})`,
                    maxWidth: '100%',
                    maxHeight: '400px'
                  }"
                  class="mx-auto transition-transform duration-300"
                ></canvas>
              </div>

              <!-- 裁剪框控制 -->
              <div v-if="isCropping" class="crop-controls absolute bottom-2 left-0 right-0 bg-white/90 backdrop-blur-sm rounded-lg shadow-md p-3 z-10">
                <div class="flex items-center justify-between gap-4">
                  <div class="flex items-center gap-3">
                    <label class="text-sm font-medium text-gray-700">裁剪比例:</label>
                    <select v-model="aspectRatio" class="text-sm border border-gray-300 rounded-md px-2 py-1 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                      <option value="">自由比例</option>
                      <option value="1">1:1</option>
                      <option value="1.777">16:9</option>
                      <option value="1.333">4:3</option>
                      <option value="0.75">3:4</option>
                    </select>
                  </div>
                  <div class="flex gap-2">
                    <button 
                      class="px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-md transition-colors"
                      @click="isCropping = false"
                    >
                      取消
                    </button>
                    <button 
                      class="px-3 py-1 text-sm bg-primary hover:bg-primary/90 text-white rounded-md transition-colors"
                      @click="cropImage"
                    >
                      应用裁剪
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons flex gap-3 mt-4">
              <button 
                class="flex-1 py-2 bg-primary hover:bg-primary/90 text-white rounded-md transition-colors flex items-center justify-center gap-2"
                @click="isCropping = !isCropping"
              >
                <i class="fa fa-crop"></i>
                <span>{{ isCropping ? '取消裁剪' : '裁剪图片' }}</span>
              </button>
              <button 
                class="flex-1 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-md transition-colors flex items-center justify-center gap-2"
                @click="downloadImage"
              >
                <i class="fa fa-download"></i>
                <span>下载图片</span>
              </button>
              <button 
                class="py-2 px-4 bg-red-100 hover:bg-red-200 text-red-600 rounded-md transition-colors flex items-center justify-center gap-2"
                @click="removeImage"
              >
                <i class="fa fa-trash"></i>
                <span>移除</span>
              </button>
            </div>
          </div>

          <!-- 属性控制 -->
          <div v-if="imageUrl" class="properties-section mt-6">
            <h3 class="text-sm font-medium text-gray-700 mb-3">图片属性</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <!-- 亮度调整 -->
              <div class="property-item">
                <div class="flex items-center justify-between mb-1">
                  <label class="text-xs text-gray-500">亮度</label>
                  <span class="text-xs text-gray-400">{{ brightness }}%</span>
                </div>
                <input 
                  type="range" 
                  v-model="brightness"
                  min="-100" 
                  max="100" 
                  step="1"
                  @input="applyImageEffects"
                  class="w-full"
                >
              </div>

              <!-- 对比度调整 -->
              <div class="property-item">
                <div class="flex items-center justify-between mb-1">
                  <label class="text-xs text-gray-500">对比度</label>
                  <span class="text-xs text-gray-400">{{ contrast }}%</span>
                </div>
                <input 
                  type="range" 
                  v-model="contrast"
                  min="-100" 
                  max="100" 
                  step="1"
                  @input="applyImageEffects"
                  class="w-full"
                >
              </div>

              <!-- 饱和度调整 -->
              <div class="property-item">
                <div class="flex items-center justify-between mb-1">
                  <label class="text-xs text-gray-500">饱和度</label>
                  <span class="text-xs text-gray-400">{{ saturation }}%</span>
                </div>
                <input 
                  type="range" 
                  v-model="saturation"
                  min="0" 
                  max="200" 
                  step="1"
                  @input="applyImageEffects"
                  class="w-full"
                >
              </div>

              <!-- 清晰度调整 -->
              <div class="property-item">
                <div class="flex items-center justify-between mb-1">
                  <label class="text-xs text-gray-500">清晰度</label>
                  <span class="text-xs text-gray-400">{{ sharpness }}%</span>
                </div>
                <input 
                  type="range" 
                  v-model="sharpness"
                  min="0" 
                  max="100" 
                  step="1"
                  @input="applyImageEffects"
                  class="w-full"
                >
              </div>
            </div>
          </div>
        </div>

        <!-- 弹窗底部按钮 -->
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="closeEditor">
            取消
          </button>
          <button class="btn btn-primary" @click="saveAndClose">
            保存
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch, onMounted } from 'vue';

export default {
  name: 'ImageEditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ['input'],
  setup(props, { emit }) {
    // 引用
    const fileInput = ref(null);
    const canvas = ref(null);
    const ctx = ref(null);
    
    // 状态
    const imageUrl = ref(props.value);
    const originalImageData = ref(null);
    const currentImageData = ref(null);
    const isCropping = ref(false);
    const aspectRatio = ref('');
    const rotation = ref(0);
    const flipX = ref(1);
    const flipY = ref(1);
    const isOpen = ref(false);
    
    // 图片效果参数
    const brightness = ref(0);
    const contrast = ref(0);
    const saturation = ref(100);
    const sharpness = ref(0);
    
    // 初始化canvas
    onMounted(() => {
      if (canvas.value) {
        if (imageUrl.value) {
          loadImage(imageUrl.value);
        }
      }
    });
    
    // 监听外部值变化
    watch(() => props.value, (newVal) => {
      if (newVal !== imageUrl.value) {
        imageUrl.value = newVal;
        if (newVal) {
          loadImage(newVal);
        } else {
          resetEditor();
        }
      }
    });
    
    // 触发文件输入
    const triggerFileInput = () => {
      if (!props.disabled) {
        fileInput.value?.click();
      }
    };
    
    // 处理文件选择
    const handleFileChange = (e) => {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (event) => {
          imageUrl.value = event.target.result;
          loadImage(imageUrl.value);
          emit('input', imageUrl.value);
        };
        reader.readAsDataURL(file);
      }
      // 清空input，允许重复选择同一文件
      fileInput.value.value = '';
    };
    
    // 加载图片
    const loadImage = (url) => {
      const img = new Image();
      img.onload = () => {
        // 设置canvas尺寸
        const maxWidth = 800;
        const maxHeight = 600;
        let width = img.width;
        let height = img.height;
        
        // 保持比例缩放
        if (width > maxWidth) {
          const ratio = maxWidth / width;
          width = maxWidth;
          height = height * ratio;
        }
        if (height > maxHeight) {
          const ratio = maxHeight / height;
          height = maxHeight;
          width = width * ratio;
        }
        
        canvas.value.width = width;
        canvas.value.height = height;
        ctx.value = canvas.value.getContext('2d');
        // 绘制图片 - 添加安全检查
        if (ctx.value && canvas.value) {
          ctx.value.drawImage(img, 0, 0, width, height);
          // 保存原始图片数据
          originalImageData.value = ctx.value.getImageData(0, 0, width, height);
          currentImageData.value = ctx.value.getImageData(0, 0, width, height);
        } else {
          console.error('Canvas context is not available for drawing');
        }
        // 重置所有编辑状态
        resetEditingState();
      };
      img.src = url;
    };
    
    // 重置编辑器
    const resetEditor = () => {
      if (ctx.value && canvas.value) {
        ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
      }
      originalImageData.value = null;
      currentImageData.value = null;
      resetEditingState();
    };
    
    // 重置编辑状态
    const resetEditingState = () => {
      rotation.value = 0;
      flipX.value = 1;
      flipY.value = 1;
      brightness.value = 0;
      contrast.value = 0;
      saturation.value = 100;
      sharpness.value = 0;
      isCropping.value = false;
      aspectRatio.value = '';
    };
    
    // 旋转图片
    const rotateImage = () => {
      rotation.value = (rotation.value + 90) % 360;
      
      // 对于90度和270度，需要交换canvas尺寸
      if (rotation.value === 90 || rotation.value === 270) {
        const temp = canvas.value.width;
        canvas.value.width = canvas.value.height;
        canvas.value.height = temp;
      }
      
      redrawImage();
    };
    
    // 翻转图片
    const flipImage = (direction) => {
      if (!currentImageData.value) return;
      
      // 创建新的ImageData用于存储翻转后的图像
      const flippedData = new ImageData(
        new Uint8ClampedArray(currentImageData.value.data),
        currentImageData.value.width,
        currentImageData.value.height
      );
      
      const width = currentImageData.value.width;
      const height = currentImageData.value.height;
      
      if (direction === 'horizontal') {
        // 水平翻转：左右像素交换
        for (let y = 0; y < height; y++) {
          for (let x = 0; x < width; x++) {
            const srcIndex = (y * width + x) * 4;
            const destIndex = (y * width + (width - x - 1)) * 4;
            
            flippedData.data[destIndex] = currentImageData.value.data[srcIndex];         // R
            flippedData.data[destIndex + 1] = currentImageData.value.data[srcIndex + 1]; // G
            flippedData.data[destIndex + 2] = currentImageData.value.data[srcIndex + 2]; // B
            flippedData.data[destIndex + 3] = currentImageData.value.data[srcIndex + 3]; // A
          }
        }
      } else {
        // 垂直翻转：上下像素交换
        for (let y = 0; y < height; y++) {
          for (let x = 0; x < width; x++) {
            const srcIndex = (y * width + x) * 4;
            const destIndex = ((height - y - 1) * width + x) * 4;
            
            flippedData.data[destIndex] = currentImageData.value.data[srcIndex];         // R
            flippedData.data[destIndex + 1] = currentImageData.value.data[srcIndex + 1]; // G
            flippedData.data[destIndex + 2] = currentImageData.value.data[srcIndex + 2]; // B
            flippedData.data[destIndex + 3] = currentImageData.value.data[srcIndex + 3]; // A
          }
        }
      }
      
      // 更新图像数据
      currentImageData.value = flippedData;
      
      // 重绘图片
      redrawImage();
    };
    
    // 重置图片
    const resetImage = () => {
      if (originalImageData.value) {
        currentImageData.value = new ImageData(
          new Uint8ClampedArray(originalImageData.value.data),
          originalImageData.value.width,
          originalImageData.value.height
        );
        resetEditingState();
        canvas.value.width = originalImageData.value.width;
        canvas.value.height = originalImageData.value.height;
        redrawImage();
      }
    };
    
    // 应用图片效果
    const applyImageEffects = () => {
      if (!originalImageData.value) return;
      
      // 创建一个新的ImageData
      const imageData = new ImageData(
        new Uint8ClampedArray(originalImageData.value.data),
        originalImageData.value.width,
        originalImageData.value.height
      );
      
      const data = imageData.data;
      
      // 应用亮度和对比度
      if (brightness.value !== 0 || contrast.value !== 0) {
        const factor = (259 * (contrast.value + 255)) / (255 * (259 - contrast.value));
        
        for (let i = 0; i < data.length; i += 4) {
          data[i] = factor * (data[i] - 128) + 128 + brightness.value; // R
          data[i + 1] = factor * (data[i + 1] - 128) + 128 + brightness.value; // G
          data[i + 2] = factor * (data[i + 2] - 128) + 128 + brightness.value; // B
        }
      }
      
      // 应用饱和度
      if (saturation.value !== 100) {
        const factor = 1 + saturation.value / 100;
        
        for (let i = 0; i < data.length; i += 4) {
          const gray = 0.3 * data[i] + 0.59 * data[i + 1] + 0.11 * data[i + 2];
          data[i] = gray + (data[i] - gray) * factor; // R
          data[i + 1] = gray + (data[i + 1] - gray) * factor; // G
          data[i + 2] = gray + (data[i + 2] - gray) * factor; // B
        }
      }
      
      // 保存修改后的图片数据
      currentImageData.value = imageData;
      redrawImage();
    };
    
    // 裁剪图片
    const cropImage = () => {
      // 简化版裁剪，实际应用中需要更复杂的裁剪框交互
      // 这里我们只是简单地将当前的canvas状态作为裁剪后的结果
      redrawImage();
      
      // 使用requestAnimationFrame确保重绘完成后再获取数据
      requestAnimationFrame(() => {
        // 更新原始数据为裁剪后的结果
        originalImageData.value = ctx.value.getImageData(0, 0, canvas.value.width, canvas.value.height);
        currentImageData.value = ctx.value.getImageData(0, 0, canvas.value.width, canvas.value.height);
        
        // 退出裁剪模式
        isCropping.value = false;
        
        // 保存裁剪后的图片
        saveImage();
      });
    };
    
    // 重绘图片
    const redrawImage = () => {
      if (!currentImageData.value) return;
      
      ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
      ctx.value.putImageData(currentImageData.value, 0, 0);
      
      // 应用清晰度调整（简单实现）
      if (sharpness.value > 0) {
        applySharpness();
      }
    };
    
    // 应用清晰度调整
    const applySharpness = () => {
      const imageData = ctx.value.getImageData(0, 0, canvas.value.width, canvas.value.height);
      const data = imageData.data;
      const tempData = new Uint8ClampedArray(data);
      
      const sharpnessFactor = sharpness.value / 100;
      
      for (let y = 1; y < canvas.value.height - 1; y++) {
        for (let x = 1; x < canvas.value.width - 1; x++) {
          for (let c = 0; c < 3; c++) {
            const index = (y * canvas.value.width + x) * 4 + c;
            const center = tempData[index];
            const top = tempData[((y - 1) * canvas.value.width + x) * 4 + c];
            const bottom = tempData[((y + 1) * canvas.value.width + x) * 4 + c];
            const left = tempData[(y * canvas.value.width + (x - 1)) * 4 + c];
            const right = tempData[(y * canvas.value.width + (x + 1)) * 4 + c];
            
            // 锐化算法：中心像素 * 5 - 四周像素之和
            const sharpened = center * (1 + 4 * sharpnessFactor) - (top + bottom + left + right) * sharpnessFactor;
            data[index] = Math.max(0, Math.min(255, sharpened));
          }
        }
      }
      
      ctx.value.putImageData(imageData, 0, 0);
    };
    
    // 保存图片
    const saveImage = () => {
      // 使用requestAnimationFrame确保canvas完全重绘后再获取图片数据
      requestAnimationFrame(() => {
        const dataUrl = canvas.value.toDataURL('image/png');
        imageUrl.value = dataUrl;
        emit('input', dataUrl);
      });
    };

    // 打开编辑器弹窗
    const openEditor = () => {
      if (props.disabled) return;
      isOpen.value = true;
      
      // 如果已经有图片，重新加载以确保编辑状态正确
      if (imageUrl.value) {
        loadImage(imageUrl.value);
      }
    };

    // 关闭编辑器弹窗
    const closeEditor = () => {
      isOpen.value = false;
      // 重置裁剪状态，但保留其他编辑状态
      isCropping.value = false;
    };

    // 保存并关闭弹窗
    const saveAndClose = () => {
      saveImage();
      closeEditor();
    };
    
    // 下载图片
    const downloadImage = () => {
      if (!canvas.value) return;
      
      // 使用requestAnimationFrame确保canvas完全更新后再下载
      requestAnimationFrame(() => {
        // 创建下载链接
        const link = document.createElement('a');
        link.download = 'edited-image.png';
        link.href = canvas.value.toDataURL('image/png');
        link.click();
      });
    };
    
    // 移除图片
    const removeImage = () => {
      imageUrl.value = '';
      resetEditor();
      emit('input', '');
    };
    
    return {
      fileInput,
      canvas,
      imageUrl,
      isCropping,
      aspectRatio,
      rotation,
      flipX,
      flipY,
      brightness,
      contrast,
      saturation,
      sharpness,
      isOpen,
      triggerFileInput,
      handleFileChange,
      rotateImage,
      flipImage,
      resetImage,
      applyImageEffects,
      cropImage,
      downloadImage,
      removeImage,
      openEditor,
      closeEditor,
      saveAndClose
    };
  }
};
</script>

<style scoped>
.image-editor {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 触发按钮样式 */
.editor-trigger {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  background-color: #f9fafb;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.editor-trigger:hover {
  border-color: #165DFF;
  background-color: #f3f4f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.editor-trigger .placeholder {
  text-align: center;
  color: #6b7280;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.editor-trigger .preview {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
  border-radius: 4px;
}

.edit-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  text-align: center;
  padding: 0.25rem;
  font-size: 0.875rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.editor-trigger:hover .edit-text {
  opacity: 1;
}

/* 弹窗遮罩层 */
.editor-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

/* 弹窗容器 */
.editor-modal {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 1000px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  animation: slideUp 0.3s ease;
}

/* 弹窗头部 */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.close-button {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: #6b7280;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-button:hover {
  background-color: #f3f4f6;
  color: #374151;
}

/* 弹窗内容 */
.modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

/* 上传区域样式 */
.upload-area {
  transition: all 0.3s ease;
}

.upload-area:hover {
  transform: translateY(-2px);
}

/* 图片预览容器 */
.image-preview-container {
  position: relative;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 图片容器 */
.image-container {
  position: relative;
}

/* 属性项样式 */
.property-item {
  margin-bottom: 0.5rem;
}

.property-item input[type="range"] {
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
  outline: none;
}

.property-item input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #165DFF;
  cursor: pointer;
  transition: all 0.2s ease;
}

.property-item input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 0 4px rgba(22, 93, 255, 0.1);
}

/* 编辑工具栏按钮 */
.edit-toolbar button {
  transition: all 0.2s ease;
}

.edit-toolbar button:active {
  transform: scale(0.95);
}

/* 操作按钮 */
.action-buttons button {
  transition: all 0.2s ease;
  font-size: 14px;
}

.action-buttons button:active {
  transform: scale(0.98);
}

/* 裁剪控制区域 */
.crop-controls {
  transition: all 0.3s ease;
}

/* 弹窗底部 */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  background-color: #f9fafb;
}

/* 按钮样式 */
.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-secondary {
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.btn-secondary:hover {
  background-color: #e5e7eb;
}

.btn-primary {
  background-color: #165DFF;
  color: white;
}

.btn-primary:hover {
  background-color: #0d47a1;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .editor-modal {
    width: 95%;
    height: 95vh;
    max-height: 95vh;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .properties-section .grid {
    grid-template-columns: 1fr;
  }
  
  .modal-footer {
    flex-direction: column;
  }
  
  .modal-footer .btn {
    width: 100%;
  }
}
</style>